<template>
  <div class="oe-login" v-loading="loading">
    <div class="login-top">
      <div class="login-top-content">
        <img src="../assets/images/logo.svg" alt="" />
      </div>
    </div>
    <div class="login-center">
      <div class="login-center-content">
        <div class="content">
          <div class="content-left">
            <img src="../assets/images/login-bg.svg" alt="" />
          </div>
          <div class="content-right">
            <p class="content-user">用户登录</p>
            <a-input placeholder="请输入用户名" v-model="userName" ref="userNameInput">
              <a-icon slot="prefix" type="user" style="color: #1E8DFD;font-size:24px" />
            </a-input>
            <a-input-password placeholder="请输入登录密码" v-model="password" ref="userNameInput">
              <a-icon slot="prefix" type="lock" style="color: #1E8DFD;font-size:24px" />
            </a-input-password>
            <div class="content-exit">
              <a-checkbox @change="onChange">记住密码</a-checkbox>
            </div>
            <a-button type="primary" @click="getLogin">登录</a-button>
          </div>
        </div>
      </div>
    </div>
    <a-modal title="选择用户" class="oe-student" :visible="imported" width="70%" @cancel="importedCancel">
      <div class="oe-select">
        <span class="oe-select-input">
          <a-input placeholder="请输入名称/用户名" v-model="keyName" />
        </span>
        <span class="oe-select-input">
          <a-input placeholder="请输入学校" v-model="schoolName" />
        </span>
        <a-button type="primary" @click.stop="getDataList">查询</a-button>
      </div>
      <div class="oe-select-table">
        <a-table
          :columns="importedColumns"
          :dataSource="importedDatas"
          :scroll="{ y: 240 }"
          :pagination="paginationZjy"
        >
          <span slot="action" slot-scope="text, record">
            <a-tooltip placement="bottom" title="模拟登录">
              <span @click="getLogin(record)" class="action-icon" style="color:#1E8DFD;cursor: pointer;">模拟登录</span>
            </a-tooltip>
          </span>
        </a-table>
      </div>
      <template slot="footer">
        <a-button @click="importedSure" type="primary" html-type="submit">
          确定
        </a-button>
        <a-button @click.stop="importedCancel">
          取消
        </a-button>
      </template>
    </a-modal>
    <div class="login-foot">
      <div class="login-foot-content">
        <span>京公网安备 11010202007836号 Copyright 京ICP备12020869-19</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      userName: localStorage.getItem('userName') || '',
      password: localStorage.getItem('password') || '',
      remenberMe: false,
      loading: false,
      imported: false,
      importedColumns: [
        {
          title: '序号',
          dataIndex: 'Number',
          align: 'center'
        },
        {
          title: '姓名',
          dataIndex: 'displayName',
          sorter: true,
          align: 'center'
        },
        {
          title: '学校',
          dataIndex: 'schoolName',
          sorter: true,
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          sorter: true,
          align: 'center'
        },
        {
          title: '来源',
          dataIndex: 'dataSource',
          sorter: true,
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      importedDatas: [],
      keyName: '',
      schoolName: '',
      paginationZjy: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: false,
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.paginationZjy.current = current;
          this.paginationZjy.pageSize = pageSize;
        },
        onChange: (current, pageSize) => {
          this.paginationZjy.current = current;
          this.paginationZjy.pageSize = pageSize;
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  methods: {
    handleChange(value) {
      this.schoolId = value;
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    getLogin(record) {
      var userId = '';
      if (record) {
        userId = record.id;
      }
      this.loading = true;
      this.$http
        .post('/api/portal/LoginForOur/login', {
          userId: userId,
          userName: this.userName, //用户名
          userPwd: this.password //密码
        })
        .then((res) => {
          this.loading = false;
          if (res.code > 0) {
            this.$message.success(res.msg);
            localStorage.setItem('userName', res.userName);
            localStorage.setItem('userId', res.userId);
            localStorage.setItem('schoolName', res.schoolName);
            localStorage.setItem('schoolId', res.schoolId);
            localStorage.setItem('displayName', res.displayName);
            localStorage.setItem('token', res.token);
            localStorage.setItem('userType', res.userType);
            localStorage.setItem('avatorUrl', res.avatorUrl);
            localStorage.setItem('remenberMe', res.remenberMe);
            localStorage.setItem('logoUrl', res.logoUrl);
            if (this.remenberMe) {
              localStorage.setItem('password', this.password);
            }
            this.$router.push({
              name: res.url,
              params: {}
            });
          } else if (res.code == -100) {
            this.$message.warning(res.msg);
            this.getDataList();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    getDataList(page, pageSize, sortOrder) {
      this.loading = true;
      this.$http
        .post('/api/portal/loginForOur/getUserList', {
          userName: this.userName,
          schoolName: this.schoolName,
          displayname: this.keyName,
          sort: sortOrder || '',
          page: page || 1,
          pageSize: pageSize || 10
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.imported = true;
            this.importedDatas = [];
            this.paginationZjy.current = rst.pagination.pageIndex;
            this.paginationZjy.pageSize = rst.pagination.pageSize;
            this.paginationZjy.total = rst.pagination.totalCount;
            if (rst.list.length) {
              rst.list.forEach((item, index) => {
                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                this.importedDatas.push({
                  ...item,
                  Number: number
                });
              });
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    importedCancel() {
      this.imported = false;
      this.keyName = '';
      this.schoolName = '';
    },
    // 记住密码
    onChange(e) {
      this.remenberMe = e.target.checked;
    }
  }
};
</script>
